<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>一个重要的内置关系</title>
    <script type="text/javascript" src="./../vue.js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <school></school>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;
      Vue.prototype.x = 99;

      const school = Vue.extend({
        name: "School",
        template: `
				<div>
					<h2>学校名称:{{name}}</h2>	
					<h2>学校地址:{{address}}</h2>	
					<button @click="showX">点我输出x</button>
				</div>
			`,
        data() {
          return {
            name: "尚硅谷",
            address: "北京",
          };
        },
        methods: {
          showX() {
            console.log(this.x);
            console.log(this.__proto__.x);
            console.log(this.__proto__.__proto__.x);
          },
        },
      });

      const vm = new Vue({
        el: "#root",
        data: {
          msg: "你好",
        },
        components: { school },
      });

      // #region 了解原型
      // 定义一个构造函数
      // function Demo() {
      //   this.a = 1;
      //   this.b = 2;
      // }
      // //创建一个Demo的实例对象
      // const d = new Demo();

      // console.log(Demo.prototype); //显示原型属性

      // console.log(d.__proto__); //隐式原型属性

      // console.log(Demo.prototype === d.__proto__);

      // //程序员通过显示原型属性操作原型对象,追加一个x属性,值为99
      // Demo.prototype.x = 99;

      // console.log("@", d);
      // #endregion
    </script>
  </body>
</html>

<!-- 
		1.一个重要的内置关系:VueComponent.prototype.__proto__ === Vue.prototype
		2.为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法.
-->
